<template>
    <div class="item">
        <div class="title">
            <router-link :to ="`/Songmvie/${item.id}`"> <img :src= "item.imgurl" /></router-link>
            <span>{{item.playCount|formatNum}}万</span>
        </div>
    <router-link :to ="`/Songmvie/${item.id}`">{{item.name}}</router-link>
    </div>
</template>

<script>
export default {
    name: "Songmv",
    props:['item'],
    created(){
  
    },
    filters:{
        formatNum(val){
            return (val/10000).toFixed(2)
        }
    }
}
</script>
<style lang="less" scoped>
div.item{
    display:flex;
    flex-direction:column;
    .title{
        position: relative;
        margin-right: 19px;
        span{
            position: absolute;
            right: 5px;
            top: 12px;
            background: url()0px;
            padding-left: 13px;
            background-repeat: no-repeat;
            background-size: 11px 10px;
            font-size: 13px;
            color: #fff;
            text-shadow: 1px 0 0 rgb(0 0 0 / 15%);
        }
        img {
            width: 105px;
            margin-left: -20px;
            margin-top: 12px;
            
        }
    }
    &>a{
        text-decoration: none;
        color: #333;
        font-size: 12px;
        display: inline-block;
        line-height: 20px;
        
        margin-left: -15px;
        text-align: center;
        margin-right: 20px;  
    }
}
</style>